import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Select, Spin } from 'antd';
import { useUnderEmployeeList } from '../utils';
import Line from './Line';

const { Item } = Form;
const { Option } = Select;
const { TextArea } = Input;

// 前直属上级确认申请
const BeforeSuperior = ({ form, isEdit, relatedBusinessObject, currentUser, otherPost }) => {
    const { getFieldDecorator } = form;
    const { handoverEmployeeName, suggestionSuperior } = relatedBusinessObject;
    const [params, setParams] = useState({
        companyId: currentUser.companyId,
        excludeId: relatedBusinessObject.employeeId,
        departmentId: otherPost ? '' : currentUser.departmentId,
        userName: relatedBusinessObject.handoverEmployeeName
    });
    const { loading, employeeList } = useUnderEmployeeList(params);
    const handleEmployeeSearch = text => {
        setParams({
            ...params,
            userName: text
        });
    };
    const handleEmployeeSelect = employeeId => {
        const find = employeeList.find(item => item.id === employeeId);

        if (find) {
            form.setFieldsValue({
                handoverEmployeeName: find.employeeName
            });
        }
    };

    const renderHandoverEmployeeId = () =>
        getFieldDecorator('handoverEmployeeId', {
            initialValue: relatedBusinessObject.handoverEmployeeId
                ? window.parseInt(relatedBusinessObject.handoverEmployeeId)
                : undefined,
            rules: [
                {
                    required: true,
                    message: '请输入工作交接人！'
                }
            ]
        })(
            <Select
                allowClear
                notFoundContent={loading ? <Spin size="small" /> : null}
                loading={loading}
                showSearch
                onChange={handleEmployeeSelect}
                placeholder="请输入"
                showArrow={false}
                filterOption={false}
                onSearch={handleEmployeeSearch}
            >
                {employeeList.map(item => (
                    <Option key={item.id} value={item.id}>
                        {item.employeeName}
                    </Option>
                ))}
            </Select>
        );
    const renderSuggestionSuperior = () =>
        getFieldDecorator('suggestionSuperior', {
            initialValue: relatedBusinessObject.suggestionSuperior,
            rules: [
                {
                    max: 200,
                    message: '0-200个字符'
                }
            ]
        })(<TextArea placeholder="请输入" rows={4} />);
    return (
        <div>
            <Line />
            <h3>部门主管</h3>
            <Item label="工作交接人" required={isEdit}>
                {isEdit ? renderHandoverEmployeeId() : handoverEmployeeName || ''}
                {isEdit && getFieldDecorator('handoverEmployeeName', {})}
            </Item>
            <Item label="意见或建议" help={isEdit && '0-200个字符'}>
                {isEdit ? renderSuggestionSuperior() : suggestionSuperior || '无'}
            </Item>
        </div>
    );
};

BeforeSuperior.propTypes = {
    isEdit: PropTypes.bool.isRequired,
    form: PropTypes.object.isRequired,
    relatedBusinessObject: PropTypes.object.isRequired
};

export default BeforeSuperior;
